<template>
    <el-table :data="tableData" :border="true" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }">
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
            :sortable="column.sortable" :width="column.width" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="Actions">
            <template v-slot="scope">
                <el-button @click="editRow(scope.row)" size="small">编辑</el-button>
                <el-button @click="deleteRow(scope.row)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { reactive, onMounted } from "vue";
const props = defineProps({
    // listData: {
    //     type: Array,
    //     //  数组类型默认值必须通过函数返回，参数props中会接收传递来的所有属性值
    //     default(props) {
    //         return {}

    //     }
    // }
    tableData: {
        type: Array,
        required: true,
    },
    columns: {
        type: Array,
        required: true,
    },
})
const emit = defineEmits(['edit', 'delete']);  
const editRow = (row) => {
    // 编辑行的逻辑  
    emit('edit', row);  
}
const deleteRow = (row) => {
    // 删除行的逻辑  
    emit('delete', row);  
}

onMounted(() => {

})
</script>